Canvas Class
Canvas controls are very useful for implementing your own graphical controls because you can use the Graphics class drawing commands or the Object2D classes to draw inside the Canvas region. It can also be used to display existing graphics, like the ImageWell.
More information available in parent classes: RectControl:Control:Object
Because this is a RectControl, see the RectControl class for other properties and events that are common to all RectControl objects.
Notes
Coordinates passed to Canvas events are local to the Canvas object.
To use the Scroll method to scroll the picture in a Canvas control, you need to store the last scroll value for the axis you are scrolling so you can use this to calculate the amount to scroll. This can be done by adding a property to the window that contains the Canvas control or by creating a new class based on the Canvas control that contains properties to hold the last X scroll amount and last Y scroll amount.
If the ScrollControls parameter is True, any controls on top of the Canvas control will also be scrolled. This allows the implementation of a scrolling pane of controls.
Examples
This example draws a 3D rectangle with a raised look.
g.forecolor= RGB(255, 255, 255) //white
g.drawline 1,1,canvas1.width,1
g.drawline 1,canvas1.height-1,1,1
g.forecolor= RGB(140,140,140) //dark gray
g.drawline canvas1.width-1,2,canvas1.width-1,canvas1.height
g.drawline 1,canvas1.height-1,canvas1.width,canvas1.height-1
//fill in the light gray rectangle
g.forecolor= RGB(239,239,239)
g.fillrect 2,2,canvas1.width-3,canvas1.height-3
This example assigns a picture that has been added to the Project Editor to the Backdrop property:
You can then use the methods of the Graphics class to modify the picture in any way you like. For example, the following code in the object's Paint event handler adds a caption to the picture:
Me. Graphics.TextSize=14
Me. Graphics.ForeColor= RGB(255,255,255)
Me. Graphics.DrawString "Joe Bob",10,100
If you instead assigned the graphic to the BackDrop property using NewPicture, as shown below, you could manipulate the graphic at the pixel level using the RGBSurface property of the Picture object.
See also the examples for the Control class, which gives an example of dragging from a Canvas control and the ImageWell class example, which show drag and drop to and from the ImageWell.Image property.
Simulating a Focus Ring on Windows and Linux
Unfortunately, a Focus Ring does not appear on Windows or Linux when a Canvas control gets the focus, but the GotFocus and LostFocus events fire normally. You can easily use them to simulate a focus ring.
In the GotFocus event, use:
Me. Graphics.forecolor= HighlightColor //or FrameColor, whichever you wish
Me. Graphics.DrawRect 0,0,me.width-1,me.height-1
#endif
In the LostFocus event, use:
Me. Graphics.forecolor= RGB(178,178,178) //gray
Me. Graphics.DrawRect 0,0,me.width-1,me.height-1
#endif
See Also
Graphics, Picture classes; NewPicture function.